<template>
    <footer>
        <div class="center-box">
            <div class="box">
                <div class="bar-1">
                    <img style="width: 80px;height:80px;" src="../assets/icons/favsion.png" alt="PASSLINK">
                    <span class="bar-1-font-1">PassLink.cn</span>
                    <br />

                    <p class="bar-1-font-2">
                        {{ $t('bottomBar.motto') }}
                    </p>
                    <p class="bar-1-font-2">created on September 30, 2023</p>
                    <br />

                    <div style="display:flex;align-items: center;">
                        <img style="width:20px; height:20px;
                    text-align: center;" src="../assets/icons/copyright.svg" alt="PASSLINK" />
                        <span class="bar-1-font-1">PASSLINK</span>
                    </div>
                </div>
                <div class="bar-2">

                    <ul>
                        <p> {{ $t('bottomBar.navigation') }}</p>
                       
                        <li><router-link to="/home">{{ $t('bottomBar.home') }}</router-link></li>
                        <li> <router-link to="/community">{{ $t('bottomBar.community') }}</router-link></li>
                        <li> <router-link to="/study">{{ $t('bottomBar.learning') }}</router-link></li>
                        <li> <router-link to="/about">{{ $t('bottomBar.about') }}</router-link></li>
                        <li> <router-link to="/contentlog">{{ $t('bottomBar.journal') }}</router-link></li>
                        <li><router-link to="/study">{{ $t('bottomBar.onlineDiscussions') }}</router-link></li>
                    </ul>
                </div>
                <div class="bar-2">
                    <ul>
                        <p>{{ $t('bottomBar.links') }}</p>
                        <li><span><a href="https://share.passlink.cn" target="_blank">第一代博客(前端)</a></span></li>
                        <li><span><a href="https://mobile.passlink.cn" target="_blank">第二代(前端,后端烂尾)</a></span></li>
                        <li><span><a href="https://www.passlink.cn" >第三代</a></span></li>
                        <li><span><a href="https://gitee.com/xcbnh" target="_blank">gitee</a></span></li>
                        <li><span><a href="https://github.com/HHP999" target="_blank">github</a></span></li>
                        <li><span><a href="https://hexo.passlink.cn/" target="_blank">   github.io</a></span></li>
                        <li><span><a href="https://blog.csdn.net/weixin_64094522" target="_blank">CSDN</a></span></li>
                    </ul>
                </div>
                <div class="bar-2">
                    <ul>
                        <p>{{ $t('bottomBar.resource') }}</p>
                        <li><span><a href="https://geeknb.com/" target="_blank">牛客</a></span></li>
                        <li><span><a href="https://www.runoob.com/" target="_blank">菜鸟</a></span></li>
                        <li><span><a href="https://code.z01.com/bootstrap-vue/" target="_blank">UI</a></span></li>
                        <li><span><a href="https://www.bilibili.com/" target="_blank">高级学府</a></span></li>
                        <li><span><a href="https://www.dusaiphoto.com/" target="_blank">优质博客</a></span></li>
                        <li><span><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_Nodejs" target="_blank">Express</a></span></li>
                        <li><span><a href="https://docs.pythontab.com/" target="_blank">爬虫</a></span></li>
                        <li><span><a href="https://blog.aabyss.cn/" target="_blank">深渊</a></span></li>
                        <li><span><a href="https://www.reactnative.cn/docs" target="_blank">React</a></span></li>

                      
                    </ul>
                </div>

            </div>


        </div>
    </footer>
</template>
<script setup lang="ts">
// import {ref,reactive} from "vue"


</script>
<style lang="scss" scoped>
@media screen and (max-width: $passlink-media-max-width-5) {
    footer{ // 在宽度大于断点时隐藏
      display: none;
    }
    
  }




.center-box {
    background-color: $passlink-bg-color;
    height: 470px;
    margin: auto;
    display: flex;

    .box {
        height: 400px;
        width: 100%;
        margin: auto;
        padding: 30px;
        display: flex;
        justify-content: space-around;
        .bar-1 {
            min-width: 200px;
            .bar-1-font-1 {
                color: $passlink-font-color-white;
                font-size: $passlink-font-size18;
                font-weight: bold;

            }

            .bar-1-font-2 {
                color: $passlink-font-color-white;
                font-size: $passlink-font-size16;
                width: 300px;
                font-weight: lighter;
            }
        }

        .bar-2 {
            min-width: 200px;
            background-color: $passlink-bg-color;

            p {
                font-weight: bold;
                font-size: $passlink-font-size18;
                color: $passlink-font-color-white ;
            }

            ul {
                height: 10px;
                text-align: left;
               
                li {
                    font-size: $passlink-font-size16;
                    color: $passlink-font-color-white;
                    font-weight: lighter;
                    list-style: none;
                  a{
                    color: $passlink-font-color-white;
                    text-decoration: none;               
                    }
                a:hover{
                    text-decoration: underline;
                    color: $passlink-font-color-yellow;
                }
                }

            
            }

        }

    }
}</style>
